const lCon = document.querySelector('.list');
const pCon = document.querySelector('.page');
// const caches = {}; // 最low的缓存代理
// 闭包实现缓存 => 避免污染全局、模块化
function moduleCache() {
    const caches = {};
    return {
        set: (page, datas) => {
            caches[page] = datas;
        },
        get: (page) => {
            if (page in caches) {
                renderList(caches[page]);
            } else {
                fetchData(page);
            }
        }
    }
}
const goto = moduleCache();
// 分页事件委托
pCon.addEventListener('click', (evt) => {
    if (evt.target.tagName.toLowerCase() === 'li') {
        const page = evt.target.innerText
        goto.get(page);
        /* // 最low的缓存代理
        if (page in caches) {
            renderList(caches[page]);
        } else {
            fetchData(page);
        }
        fetchData(page); */
    }
}, false); // false 事件冒泡阶段
// 数据渲染
function renderList(datas) {
    const lists = [];
    datas.forEach(data => {
        lists.push(`<li>
            <img src="${data.thumbnail_pic_s}" alt="">
            <h1 class="title">${data.title}</h1>
        </li>`)
    });
    lCon.innerHTML = lists.join('');
}
// 数据拉取
function fetchData(page) {
    const xhr = new XMLHttpRequest(); // 创建XHR对象
    const uri = 'http://localhost:3000/api/lists'
    const data = {
        page: page,
        num: 8
    }
    const params = [];
    for (const key in data) {
        params.push(key + '=' + data[key]);
    }
    // 开启数据通道
    xhr.open('GET', `${uri}?${params.join('&')}`, true);
    // 状态监听
    xhr.onreadystatechange = () => {
        // 1 正在发送 2 已收到响应 3 解析中 4 响应内容
        if (xhr.readyState === 4) {
            if (xhr.status === 200 || xhr.status === 304) {
                const res = JSON.parse(xhr.response);
                // 闭包实现缓存
                goto.set(page, res.data.lists);
                /* // 最low的缓存代理
                caches[page] = res.data.lists; */
                renderList(res.data.lists);
            }
        }
    }
    // 发送请求 post方法需要传入formdata
    xhr.send(null);
}
fetchData(1, 8);
/*
 * @desc 课堂练习，统计各值出现的次数
 */
const str = 'sfsgfsnkasdkladsdlaksfasdasazasdascsvccvasdasewwsxz';
const str_arr = str.split('');
const obj = {};
for (const i of str_arr) {
    if (obj.hasOwnProperty(i)) {
        obj[i]++;
    } else {
        obj[i] = 1;
    }
}
console.log(obj);
/// es6实现
const es6arr = str.split('').reduce((x, y) => (x[y]++||(x[y] = 1), x), {});
console.log(es6arr);